<template>
  <div class="ctbsc-list">
    <div class="bgcc">
      <div class="bread_box wp">
        <div class="bread">
          <a href="/"><span class="myfont">&#xe651;</span>首页</a>
          <router-link :to="'/list/'+channelInfo.id" ><span class="myfont rightico">&#xe68f;</span><span>{{channelInfo.name}}</span></router-link>
          <span v-if="params.sonid" class="myfont rightico">&#xe68f;</span><span>{{channelSonInfo.name}}</span>
        </div>
      </div>
      <div class="wp">
        <div class="listtitle">
          <h2 v-if="params.sonid"><span class="myfont" >&#xe693;</span> {{channelSonInfo.name}} </h2>
          <h2 v-else><span class="myfont" >&#xe693;</span> {{channelInfo.name}} </h2>
          <span class="countnum">当前总共收录了 <span class="active">{{total}}</span> 份公文</span>
        </div>
      </div>
    </div>
    <div class="listnav wp mt10 keke_doc_clearfix">
      <div class="listnavsub" style="min-height: 104px">
        <div class="navmod keke_doc_clearfix">
          <ul class="menu-light">
            <li v-for="(item,index) in classifies" :key="index" >
              <router-link :to="'/list/'+item.id" :class="item.id==channelInfo.id?'actives':''">{{item.name}}</router-link>

            </li>

          </ul>
        </div>
      </div>
      <div class="navmod keke_doc_clearfix keke_subcate" v-if="channelInfo['children']&&channelInfo['children'].length>0">
        <ul class="menu-light">
          <li v-for="(item,index) in channelInfo['children']" class="menu-s" :key="index" >
            <router-link :to="'/list/'+channelInfo.id+'/'+item.id" :class="item.id==channelSonInfo['id']?'actives':''">{{item.name}}</router-link>

          </li>
        </ul>
      </div>
    </div>

    <div class="keke_list_box keke_doc_clearfix wp">
      <el-checkbox style="color: #F83138FF;font-weight: bolder" v-model="postParams.isToday" :true-label="1" :false-label="2" @change="getDataList">只看今日更新</el-checkbox>
      <span @click.stop="batchDownload" style="color: #F83138FF;font-weight: bolder;font-size: 18px;cursor: pointer;margin-left: 35px" v-model="postParams.isToday" :true-label="1" :false-label="2" @change="getDataList">一键下载</span>
<!--      <div class="orderbox keke_doc_clearfix">-->

<!--        <ul class="order-list keke_doc_clearfix">-->
<!--          <li class="selected"><a href="?stype=0" class="active">默认</a></li>-->
<!--        </ul>-->
<!--      </div>-->
      <div class="bodybox keke_doc_clearfix" style="margin-top:10px;" v-loading="loading">
        <div class="mod_list keke_doc_clearfix" id="container" style="min-height: 350px;">
          <li v-for="(item,index) in records">
            <span>{{item['human_time']}}</span>
            <i :style="'font-size:16px;width: 20px;height: 22px;color:'+$utils.getIconColor(item.type)"  :class="'far '+$utils.getIcon(item.type)"></i>
            <router-link :title="item.title" target="_blank" tag="a" :to="'/detail/'+item.id">{{item.title}}</router-link>
          </li>
        </div>
        <div style="margin-top:30px;margin-bottom:20px;text-align: center">
          <el-pagination
                  background
                  @size-change="handleSizeChange"
                  @current-change="handleCurrentChange"
                  :current-page="pageParams.page"
                  :page-sizes="[30, 60, 90, 120]"
                  :page-size="pageParams.pageSize"
                  layout="total, sizes, prev, pager, next, jumper"
                  :total="total">
          </el-pagination>
        </div>

      </div>
    </div>
  </div>
</template>

<script>

  export default {
    name: "ListView",
    components: {

    },
    data() {
      return {
        classifies:[],
        records:[],
        channelInfo:{},
        channelSonInfo:{},
        loading:false,
        id:null,
        sonId:null,
        params:{
          id:'',
          sonid:''
        },
        total:0,
        postParams:{
          classifyId:'',
          title:'',
          isToday:2
        },
        pageParams:{
          page:1,
          pageSize:90
        }

      };
    },
    created() {

      this.$watch(
              () => this.$route.params,
              () => {

                this.params=this.$route.params
                this.pageParams.page=1;
                this.postParams.isToday=2;
                this.postParams.pos=this.$route.query.pos;
                this.postParams.pic=this.$route.query.pic;
                if(this.params.id){
                  this.postParams.classifyId=this.params.id;
                }
                if(this.params.sonid){
                  this.postParams.classifyId=this.params.sonid;
                }
                this.getList()
              },
              // 组件创建完后获取数据，
              // 此时 data 已经被 observed 了
              { immediate: true }
      )


    },
    mounted:function(){
      this.$nextTick(()=>{

      });
    },
    methods:{

        batchDownload(){
          const kw = this.postParams.title;
          const token  = this.$store.getters.token
          const classifyId = this.postParams.classifyId
          const pos = this.postParams.pos
          const pic = this.postParams.pic

          if(!this.$store.getters.token){
            this.$message.error("亲，右上角~~请先微信扫码登录！")
            return;
          }
          const is_memeber = this.$store.getters.userInfo.ex_is_member
          if (typeof(is_memeber)=="undefined" || is_memeber!=1) {
            this.$message.error("请先开通会员")
            return;
          }

          if( kw=="" || kw=="undefined" || typeof(kw)=="undefined"){
            this.$message.error("关键词不能为空！");
            return;
          }

          if(this.total>=300){
            //this.$message.error("亲，批量下载的文档超出限制（300篇），请先精确关键词，缩小搜索范围！");
            this.$message.error("亲，批量下载的文档超出限制（300篇），系统会自动下载最新300篇！");
            //return;
          }

          let link = document.createElement("a");
          //创建一个a标签
          link.style.display = "none";
          link.href = `${this.$config.apiUrl}/api/exportZip?title=${kw}&classifyId=${classifyId}&pos=${pos}&pic=${pic}`;
          console.log(link.href)
          //return;
          //给a标签添加下载链接  "域名+接口"  safe是一个动态的域名  后面的接口替换成你自己的下载接口
          link.setAttribute("download", name);
          // 此处注意，要给a标签添加一个download属性，属性值就是文件名称 否则下载出来的文件是没有属性的，空白白
          document.body.appendChild(link);
          //将上面创建的a标签加入到body的尾部
          link.click();

        },

        handleSizeChange(val) {
          this.pageParams.page=1;
          this.pageParams.pageSize=val;
          this.getDataList();

        },
        handleCurrentChange(val) {
          this.pageParams.page=val;
          this.getDataList();

        },
        getList(){
          this.$apis.homeData(this.postParams).then(res=>{
            this.classifies=res.classifies;
            for(let i=0;i<res.classifies.length;i++){
              if(this.params.id==res.classifies[i].id){
                this.channelInfo=res.classifies[i];
                this.channelSonInfo={};
                this.$utils.setPageTitle(this.channelInfo.name)
                if(this.channelInfo['children']){
                  for(let j=0;j<this.channelInfo.children.length;j++){
                    if(this.params.sonid==this.channelInfo.children[j].id){
                        this.channelSonInfo=this.channelInfo.children[j];
                        this.$utils.setPageTitle(this.channelSonInfo.name)
                    }
                  }

                }
              }
            }

            this.getDataList();
          })
        },
        getDataList(){
          if(this.$route.query.keyword){
            this.postParams.title=this.$route.query.keyword;
          }else{
            this.postParams.title='';
          }

          //请求列表数据
          let listParams={...this.postParams,...this.pageParams};
          this.loading=true;
          this.$apis.getDataList(listParams).then(lstres=>{
            let records=lstres.records;

            this.total=lstres.total;
            this.records=lstres.records;
            this.loading=false;
          })
        }
    }
  };
</script>
<style>
  /*.mod_list a:visited {*/
  /*  color:  #F83138FF !important;*/
  /*}*/




  body{
    background: #f8f8f8 !important
  }

  .el-checkbox__label{
    font-size: 18px;
  }

  .mod_list li {
    line-height: 35px;
    float: left;
    width: 33.3%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
  }

  .mod_list li span {
    float: right;
    color: #999;
    margin: 0 20px
  }

  .mod_list li a {
    font-size: 14px;
    color: #000;
    white-space: nowrap;
    font-weight: 400;
    overflow: hidden;
    text-overflow: ellipsis
  }

  .mod_list .myfont {
    font-size: 16px;
    margin-right: 5px
  }

  .bodybox {
    background-color: #fff;
    padding: 15px 20px;
  }
</style>
